<template>
    <div>
        <el-card>
            <template #header>
                <div>
                    <el-form :model="formData" ref="form" label-width="80px" :inline="false">
                        <el-row :gutter="20">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="选择计划">
                                    <el-input style="width: 350px; margin-right: 10px;" v-model="formData.planId"
                                        placeholder="请选择计划" disabled></el-input>
                                    <el-button type="primary" @click="showPlanModal">选择计划</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" :offset="0">
                                <el-form-item label="选择任务">
                                    <el-input style="width: 350px; margin-right: 10px;" v-model="formData.taskId"
                                        placeholder="请选择任务" disabled></el-input>
                                    <el-button type="primary" @click="showTaskModal">选择任务</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8" :offset="0">
                                <el-form-item label="产品编号" prop="materialId">
                                    <el-input style="width: 350px;" disabled placeholder="请输入产品编号"
                                        v-model="formData.materialId"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" :offset="0">
                                <el-form-item label="产品名称" prop="materialName">
                                    <el-input style="width: 350px;" disabled placeholder="请输入产品名称"
                                        v-model="formData.materialName"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" :offset="0">
                                <el-form-item label="产品单位" prop="unit">
                                    <el-input style="width: 350px;" disabled placeholder="请输入产品单位"
                                        v-model="formData.unit"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="24" :offset="0">
                                <el-form-item label="规格型号" prop="specificationsAndModels">
                                    <el-input style="width: 350px;" type="textarea"
                                        v-model="formData.specificationsAndModels"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="8" :offset="0">
                                <el-form-item label="报工数量" prop="totalQuantity">
                                    <el-input style="width: 350px;" type="number" placeholder="请输入报工数量"
                                        v-model="formData.totalQuantity" disabled>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" :offset="0">
                                <el-form-item label="合格数量" prop="qualifiedQuantity">
                                    <el-input style="width: 350px;" type="number" placeholder="请输入报工数量"
                                        v-model="formData.qualifiedQuantity" @input="updateTotalQuantity"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" :offset="0">
                                <el-form-item label="不合格数量" prop="defectQuantity">
                                    <el-input style="width: 350px;" type="number" placeholder="请输入报工数量"
                                        v-model="formData.defectQuantity" @input="updateTotalQuantity"></el-input>
                                </el-form-item>
                            </el-col>

                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8" :offset="0">
                                <el-form-item label="报工日期" prop="reportTime">
                                    <el-date-picker style="width: 350px;" type="datetime" placeholder="请选择报工日期"
                                        v-model="formData.reportTime" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" :offset="0">
                                <el-form-item label="报工人员" prop="reportId">
                                    <template #default>
                                        <el-select v-model="formData.reportId" placeholder="请选择报工人员">
                                            <el-option v-for="item in users" :key="item.username" :label="item.nickname" :value="item.username"/>
                                        </el-select>
                                    </template>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" :offset="0">
                                <el-form-item label="质检员" prop="checkId">
                                    <template #default>
                                        <el-select v-model="formData.checkId" placeholder="请输入质检员">
                                            <el-option v-for="item in users" :key="item.username" :label="item.nickname" :value="item.username"/>
                                        </el-select>
                                    </template>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-form-item>
                            <el-button type="primary" @click="submitForm">立即创建</el-button>

                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <el-dialog v-model="orderDialogVisible" title="选择计划" width="70%">
                <el-table :data="plans" style="width: 100%;">
                    <el-table-column label="计划编号" prop="planId" width="120" />
                    <el-table-column label="计划名称" prop="planName" width="120" />
                    <el-table-column label="产品编号" prop="materialId" width="120" />
                    <el-table-column label="产品名称" prop="materialName" width="120" />
                    <el-table-column label="规格型号" prop="specificationsAndModels" width="120" />
                    <el-table-column label="单位" prop="unit" width="120" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button @click="selectPlan(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>

            <el-dialog v-model="taskDialogVisible" title="选择任务" width="70%">
                <el-table :data="taskData" border style="width: 100%">
                    <el-table-column prop="taskId" label="任务编号" width="150" />
                    <el-table-column prop="taskName" label="任务名称" width="150" />
                    <el-table-column prop="workstationId" label="工作站编号" width="150" />
                    <el-table-column prop="workstationName" label="工作站名称" width="150" />
                    <el-table-column prop="taskQuantity" label="排产数量" width="150" />
                    <el-table-column prop="computedQuantity" label="已生产数量" width="150" />
                    <el-table-column prop="startDate" label="开始时间" width="150" />
                    <el-table-column prop="endDate" label="预计完成时间" width="150" />
                    <el-table-column label="操作" right-align>
                        <template #default="scope">
                            <el-button @click="selectTask(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
            <!-- card body -->
        </el-card>


    </div>
</template>

<script setup>
import { ref, defineEmits, onMounted } from 'vue'
import request from '@/api/request'
import { useUserManagement } from '@/composables/useSysUser.js'


let emits = defineEmits(['ref-table'])
const users = ref([])
onMounted(async()=>{
    request.post('/system/user/list',{size:1000}).then(res => {
        users.value = res.data.records})
})

// 监听合格数量和不合格数量的变化，自动更新总数量
const updateTotalQuantity = () => {
    const qualified = parseFloat(formData.value.qualifiedQuantity) || 0
    const defect = parseFloat(formData.value.defectQuantity) || 0
    formData.value.totalQuantity = qualified + defect
}


let submitForm = () => {
    let data = {
        productionPlanId: formData.value.planId,
        taskId: formData.value.taskId,
        reportPeopleId: formData.value.reportId,
        totalQuantity:  formData.value.totalQuantity,
        qualifiedQuantity: formData.value.qualifiedQuantity,
        defectQuantity: formData.value.defectQuantity,
        reportTime: formData.value.reportTime,
        checkId: formData.value.checkId,
    }
    request({
        url: '/report/addReport',
        method: 'post',
        data: data,
    }).then(res => {
        console.log(res)
    })
    //提交表单
    emits("ref-table")
}

let formData = ref({})//表单数据

let orderDialogVisible = ref(false)//计划弹窗是否显示
let taskDialogVisible = ref(false)//任务弹窗是否显示



let plans = ref([])//计划列表

let showPlanModal = () => {
    orderDialogVisible.value = true
    request({
        url: 'report/planAll',
        method: 'get',
    }).then(res => {
        plans.value = res.data
    })


}//显示计划弹窗

//任务
let taskData = ref([])

let showTaskModal = () => {
    taskDialogVisible.value = true
     request({
        url: '/report/taskAll',
        method: 'GET',
    }).then(res => {
        taskData.value = res.data
    })
}


let selectPlan = async (plan) => {
    //选择计划
    formData.value.planId = plan.planId
    formData.value.materialId = plan.materialId
    formData.value.materialName = plan.materialName
    formData.value.specificationsAndModels = plan.specificationsAndModels
    formData.value.unit = plan.unit
    orderDialogVisible.value = false

}

let selectTask = async (task) => {
    //选择任务
    formData.value.taskId = task.taskId
    taskDialogVisible.value = false
}


</script>

<style scoped></style>
